<template>
  <div class="hello">
    <van-nav-bar title="视频播放" />
    <!-- 视频容器 -->
    <video :src="videopath" id="video-player" controls>
      <source type="video/mp4" />
    </video>
    <!-- 垃圾的分类一 -->
    <div class="waste">
      <div class="title">
        <h2>垃圾分类四种</h2>
      </div>
      <van-cell
        title="其他垃圾"
        size="large"
        label="一、可回收物：可回收垃圾主要包括废纸、塑料、玻璃、金属和布料五大类。废纸主要包括报纸、期刊、图书、各种包装纸、办公用纸、广告纸、纸盒等，但是要注意纸巾和厕所纸由于水溶性太强不可回收。塑料主要包括各种塑料袋、塑料包装物、一次性塑料餐盒和餐具、牙刷、杯子、矿泉水瓶、牙膏皮等。玻璃主要包括各种玻璃瓶、碎玻璃片、镜子、灯泡、暖瓶等。金属物主要包括易拉罐、罐头盒等。布料主要包括废弃衣服、桌布、洗脸巾、书包、鞋等。"
      />
      <div class="wasteimg">
        <img src="@/assets/waste2.png" alt="" />
      </div>
    </div>
    <!-- 垃圾的分类二 -->
    <div class="waste">
      <!-- <div class="title">
 <h2>厨余垃圾</h2>
 </div> -->
      <van-cell
        title="厨余垃圾"
        size="large"
        label="· · · 二、厨余垃圾: 包括剩菜剩饭、骨头、菜根菜叶、果皮等食品类废物，经生物技术就地处理堆肥，每吨可生产约0.3吨有机肥料。"
      />
      <div class="wasteimg">
        <img src="@/assets/waste3.png" alt="" />
      </div>
    </div>
    <!-- 垃圾的分类三 -->
    <div class="waste">
      <!-- <div class="title">
 <h2>有害垃圾分类</h2>
  </div> -->
      <van-cell
        title="有害垃圾"
        size="large"
        label="· · 三、有害垃圾：指的是含有对人体健康有害额重金属，有毒的物质或者对环境造成危害的废弃物。
 有害垃圾包括电池、灯泡、水银温度计、油漆桶、过期药品、过期化妆品等，这些垃圾一般使用单独回收或者填埋处理。"
      />
      <div class="wasteimg">
        <img src="@/assets/waste4.png" alt="" />
      </div>
    </div>
    <!-- 垃圾的分类四 -->
    <div class="waste">
      <!-- <div class="title">
  <h2>其他垃圾分类</h2>
  </div> -->
      <van-cell
        title="其他垃圾"
        size="large"
        label="· · 四、其他垃圾：是指除上述外的砖瓦陶瓷、渣土、卫生间废纸、纸巾等难以回收的废弃物，果壳、尘土、食品袋（盒），采取卫生填埋可有效减少对地下水、地表水、土壤和空气的污染。包括：
 受污染和无法再生的纸张:如纸杯、复写纸、卫生纸、面巾纸、湿巾纸、尿片等;
 无法再生的生活用品:如陶瓷制品、受污染的一次性用品、保鲜袋(膜)、妇女卫生用品等;
 其他物品:如烟蒂、渣土灰尘、大骨头、宠物粪便等。"
      />
      <div class="wasteimg">
        <img src="@/assets/waste5.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { getvideodata } from '../api/index'

// 使用辅助函数
import { mapState } from 'vuex'
export default {
  name: 'uservideo',
  data () {
    return {
      videopath: '',
      projectFiles: [], // 用于保存项目文件数组
      list: '',
      // 动态图片
      imageArray: [],
      myimagearray: []
      // imgs: require('../temp_file/16902632301860.png')
    }
  },
  mounted () {
    this.getvideodatafunction()
  },
  methods: {
    async getvideodatafunction () {
      const result = await getvideodata()
      this.videopath = result.data[0].path
    },
    // // // 判断是否有空格
    hasSpace (str) {
      return str.includes('temp_file')
    }
  },

  created () {
    // 在组件创建的时候获取项目信息
    // this.fetchProjectFiles()
    // this.addimage()
  },
  computed: {
    ...mapState(['textimgimfo'])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.van-nav-bar {
  background: #007bff;
}

/* /deep/ 就是把data-v-hash值选择器写到类名的前面 */
/deep/ .van-nav-bar__title {
  color: white;
}
#video-player {
  width: 100%;
  height: auto;
  margin-top: 10px;
}
.waste {
  padding: 5px 10px;
}
.wasteimg {
  text-align: center;
  // background-color: pink;
  padding: 20px 0;
}
.textcontatiner {
  margin: 20px 0;
  padding: 0 10px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
